
/*******************************************************************************
 * The code below this comment is integral part of the project "Jelliphy".
 * 
 * "Jelliphy" is a project created by: 
 * Dispage - Patrizio Gelosi
 * Via A. De Gasperi 91 
 * P. Potenza Picena (MC) - Italy
 * 
 * (Hereby referred to as "DISPAGE")
 * 
 * Copyright (c) 2011 DISPAGE.
 * 
 * @Released on: 02-06-2011
 * @Version: 1.0.00
 * @Build: 1109
 * @Site: http://www.dispage.com
 * @Contacts: http://www.dispage.com/contacts
 * 
 * The contents of this file are released under the GNU General Public License
 * version 3 as published by the Free Software Foundation that can be found at
 * the address "http://opensource.org/licenses/gpl-3.0.html". If the license
 * cannot be found, write to the Free Software Foundation, Inc., 51 Franklin
 * Street, Fifth Floor, Boston, MA 02110-1301 USA.
 * 
 * You may not use the present file except in compliance with the License.
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied.  See the License
 * for the specific language governing rights and limitations under the
 * License.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * Dispage" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by Dispage".
 * 
 ******************************************************************************/

var MGTD = new function () {

	var that = this,
		$main, $canvas, $container,
		tgMgdomel,
		DOMMap = [],
		

		getElFromDOM = function ($el) {

			return DOMMap[parseInt($el.attr('mgdomel'))];
		},

		adjustDOMCanv = function () {
			
			JlQ('#mg-domcanv-container').width($main.width() -2);
			JlQ('#mg-domcanv-container').height($main.height() -30);

			MGP.fixPosFix($main);
		},

		adjustCSSCanv = function () {
			
			JlQ('#mg-csscanv-container').width($main.width() -10);
			JlQ('#mg-csscanv-container').height($main.height() -62);

			MGP.fixPosFix($main);
		},

		tabSelect = function (ev, ui) {

			if (!ui || !ui.panel) return;

			var alsoResize = '#' + ui.panel.id.replace(/-panel$/, '-container');

			if (alsoResize == '#mg-domcanv-container') {
				adjustDOMCanv();
			}
			else {
				adjustCSSCanv();
			}
			$main.resizable('option', 'alsoResize', alsoResize);
		},

		hoverElement = function (ev) {

			var $this = JlQ(this),
				el;

			if (ev.type == 'mouseover')	{
				$this.addClass('mg-domhover');
				el = getElFromDOM($this);
				if (MGD.elIsSelected) {
					JlQ('#mg-cursor-temp').removeClass('mg-hidden');
					MGP.showElement(JlQ(el), 'mg-cursor-temp');
				}
				else {
					MGP.highlightElement(el);
				}
			}
			else {
				JlQ('#mg-cursor-temp').addClass('mg-hidden');
				$this.removeClass('mg-domhover');
			}
		},

		toggleExpand = function () {

			var $this = JlQ(this),
				$parent = $this.parent(),
				$next = $parent.next('.mg-domcont'),
				isOpen = $this.hasClass('mg-dom-minus'),
				el;

			$this.toggleClass('mg-dom-plus mg-dom-minus');

			if (isOpen)	{
				$next.slideUp();
			}
			else if ($next.children().length) {
				$next.slideDown();
			}
			else {
				el = getElFromDOM($parent);
				//lev = parseInt($this.attr('mglev'));
				$parent.after(calcDOM(el, 1, true));
			}
		},

		calcDOM = function (el, last, noCurrent, road) {

			var tag = el.tagName.toLowerCase(),
				res = '',
				notEmpty = (el.innerHTML.search(/\S/) != -1),
				expand = ((typeof(last) == 'undefined' || last > 0) && notEmpty),
				expIcon = '', et = '', as = '',
				i, c, a, s;

			if (tag == '!' ) return '';
			if (el.attributes) {
				as = '<p>';
				for (i = 0; a = el.attributes[i]; i++) {
					if (a.name != '<' && a.value) {
						as += ' ' + a.name + '="<font>' + MGUtils.cutText(a.value, 30) + '</font>"'
					}
				}
				as += '</p>';
			}
			if (noCurrent != true) {
				if (notEmpty)	{
					expIcon = ' mg-dom-' + (expand ? 'minus' : 'plus');
				}
				else {
					if (!JlQ.autoCloseTags[tag]) {
						et = '&lt;/' + tag + '&gt;';
					}
				}
				res += '<div mgdomel="' + DOMMap.length + '"><span class="mg-dom-icons'+ expIcon +'"></span><div class="mg-domelem">&lt;' + tag + as + '&gt;' + et + '</div></div>';
				DOMMap.push(el);
			}
			/*res = '<div><span style="width:'+lev * 20 +'px;">&nbsp;</span><span mglev="' + lev + '" mgdomel="' + DOMMap.length + '" class="mg-dom-icons mg-dom-'+ expIcon +'"></span><div>&lt;' + el.tagName + as + '&gt;</div></div><div class="mg-domcont">';*/
			res += '<div class="mg-domcont">';
			
			if (expand) {
				if (el.children.length)	{
					res += '<div class="mg-domtxt">' + JlQ(el).textChildren() + '</div>';
				}
				else if (notEmpty) {
					res += '<div class="mg-domtxt">' + (el.textContent || el.innerText || '') + '</div>';
				}
				for (i = 0; c = el.children[i]; i++) {
					if (c.className.search(/(?:^| )(?:mg-hidden|mg-nohighlight|fbProxyElement|ygtv\w+|mg-norender)(?: |$)/) != -1 || c.id.search(/^(?:showCursor|grip[HVX]_\d+)$/) != -1) continue;
					if (typeof(road) == 'undefined') {
						res += calcDOM(c, last -1);
					}
					else {
						if (c == road[0]) {
							s = last -1;
							if (s == 0) {
								tgMgdomel = DOMMap.length;
							}
						}
						else {
							s = 0;
						}
						res += calcDOM(c, s, false, road.slice(1));
					}
				}
				if (notEmpty) {
					res += '<div>&lt;/' + tag + '&gt;</div>';
				}
			}
			return res + '</div>';
		},
			
		selectNPos = function () {

			var $tgEl = JlQ('div[mgdomel='+tgMgdomel+']', $canvas),
				pos, st, sl;

			pos = $tgEl.position();
			if (pos) {
				st = pos.top - $container.height() / 2 + $container.scrollTop();
				sl = pos.left + $container.scrollLeft();
				
				$container.scrollTop(st).scrollLeft(sl);
			}
			that.selectDOM($tgEl);
		};

	that.rendered = false;


	that.selectDOM = function ($el, andShadow) {

		if (andShadow && !$el.hasClass('mg-domelem')) {
			$el = $el.parents('.mg-domelem').first();
		}
		JlQ('div.mg-dom-selected', $canvas).removeClass('mg-dom-selected');

		$el.prev('span.mg-dom-icons').andSelf().addClass('mg-dom-selected');

		if (andShadow) {
			MGD.elIsSelected = false;
			MGP.highlightElement(getElFromDOM($el.parent()));
		}
	};

	that.renderDOM = function ($el) {

		var DOMres, $parents, brAdjust = 24;

		DOMMap = [];
		
		if ($el && $el.parent().length) {
			$parents = $el.parentsUntil('html').reverse(false);
			$parents.push($el.get(0));
			DOMres = calcDOM(document.documentElement, $parents.length, false, $parents);
		}
		else {
			DOMres = calcDOM(document.documentElement, 1);
		}
		if (JlQ.browser.webkit || JlQ.browser.safari) {
			brAdjust += 18;
		}
		JlQ('#mg-domcanv').width(JlQ('#mg-domcanv-container').width() - brAdjust);

		$canvas.html(DOMres);

		if ($parents) {
			selectNPos();
		}
		that.rendered = true;
	};

	that.init = function () {

		$main = JlQ('.mg-panel-domtree');
		$canvas = JlQ('#mg-domcanv');
		$container = JlQ('#mg-domcanv-container');

		JlQ('#mg-domtree > div').tabs({selected: 0, select: tabSelect});

		$main.resizable({ 
			alsoResize: '#mg-domcanv-container', 
			minHeight: 250,
			minWidth: 300
		});

		JlQ('.mg-dom-icons').live('click', toggleExpand);

		JlQ('div[mgdomel]', $canvas)
			.live('hover', hoverElement)
			.live('click', MGP.toggleElementSelection);

	};

	that.adjustDOMCanv = adjustDOMCanv;
};